<template>
  <a-button class="bw-emit-params-add-bnt" @click="onAddParam"> 新增</a-button>

  <ul class="bw-emit-params">
    <li class="bw-emit-param-item bw-emit-param-title">
      <span class="column-item"> 参数标识 </span>
      <span class="column-item"> 参数名称 </span>
      <span class="column-item"> 参数类型 </span>
      <span class="column-action"> 操作 </span>
    </li>

    <template v-if="curParamList.length">
      <li
        v-for="(item, index) in value"
        class="bw-emit-param-item"
        :key="item.paramKey + '_' + index"
      >
        <a-input
          class="column-item"
          placeholder="请输入参数标识"
          v-model:value="curParamList[index].paramKey"
        />

        <a-input
          class="column-item"
          placeholder="请输入参数名称"
          v-model:value="curParamList[index].paramName"
        />

        <a-select
          class="column-item"
          :options="curParamDataTypes"
          placeholder="请选择参数类型"
          v-model:value="curParamList[index].paramDataType"
        />

        <span class="column-action" @click="onDelParam(item, index)">
          删除
        </span>
      </li>
    </template>

    <template v-else>
      <a-empty />
    </template>
  </ul>
</template>

<script lang="ts" setup>
import { ref, computed, watch, unref } from 'vue'

import {
  BwCustomComEmitParamDataTypeEnum as BwParamDataTypeEnum,
  type BwCustomComSlotParmsModel,
} from '@bitwit/base-com-render'
interface BwEmitParamsProps {
  value?: Array<BwCustomComSlotParmsModel>
}

const emit = defineEmits(['add', 'delete'])
const props = withDefaults(defineProps<BwEmitParamsProps>(), {})

const curParamList = ref<Array<BwCustomComSlotParmsModel>>([])
const curParamDataTypes = computed(() => {
  return [
    { label: '数组', value: BwParamDataTypeEnum.array },
    { label: '布尔', value: BwParamDataTypeEnum.boolean },
    { label: '数字', value: BwParamDataTypeEnum.number },
    { label: '对象', value: BwParamDataTypeEnum.object },
    { label: '字符', value: BwParamDataTypeEnum.string },
  ]
})

const onAddParam = () => {
  emit('add')
}
const onDelParam = (item: BwCustomComSlotParmsModel, index: number) => {
  emit('delete', index, item)
}

watch(
  () => props.value,
  (newVal) => {
    if (Array.isArray(newVal) && newVal.length) {
      newVal.forEach((item, index) => {
        const oldData = unref(curParamList)[index]
        curParamList.value[index] = Object.assign({}, item, oldData)
      })
    } else {
      curParamList.value = []
    }
  },
  { deep: true, immediate: true }
)

defineExpose({
  getParamList() {
    return unref(curParamList)
  },
})
</script>

<style lang="less" scoped>
.bw-emit-params-add-bnt {
  margin-bottom: 8px;
}
.bw-emit-params {
  width: 100%;
  overflow: auto;
  min-height: 80px;
  max-height: 200px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;

  .bw-emit-param-title {
    height: 30px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e8e8e8;
    background-color: rgb(182, 182, 182);

    .column-item {
      text-indent: 8px;
    }

    .column-action {
      color: #000 !important;
    }
  }

  .bw-emit-param-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    justify-content: flex-start;

    .column-item {
      flex: 1;
      margin: 0 4px;
    }

    .column-action {
      width: 60px;
      cursor: pointer;
      color: #ff4d4f;
    }
  }
}
</style>
